<template>
  <section class="cms-body" v-loading="loading">
    <!-- 返回组件 -->
    <cms-back></cms-back>
    <el-form ref="form" :model="dataInfo" :rules="rules" class="cms-form" label-width="162px">

      <el-form-item label="商品ID" class="flex-50" prop="integralGoodsId" v-if="isType('update')">
        <el-input v-model="dataInfo.integralGoodsId" class="cms-width" :disabled="isType('update')" ></el-input>
      </el-form-item>

      <el-form-item label="商品类型" class="flex-50" prop="goodsTypeId">
        <el-select  @change="selectTypeChange" v-model="dataInfo.typeName" clearable placeholder="请选择">
          <el-option v-for="item in typeList" :key="item.goodsTypeId" :label="item.typeName" :value="item.goodsTypeId">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="商品分类" class="flex-50" prop="goodsTagId">
        <el-select @change="selectTagChange" v-model="dataInfo.tagName" clearable placeholder="请选择">
          <el-option v-for="item in tagList" :key="item.goodsTagId" :label="item.tagName" :value="item.goodsTagId" >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="商品名称" class="flex-50" prop="goodsName">
        <el-input v-model="dataInfo.goodsName" class="cms-width"></el-input>
      </el-form-item>

      <el-form-item label="商品链接" class="flex-50" prop="goodsLink">
        <el-input v-model="dataInfo.goodsLink" class="cms-width"></el-input>
      </el-form-item>

      <el-form-item label="排序" class="flex-50" prop="goodsSort">
        <el-input v-model="dataInfo.goodsSort" class="cms-width" type="number"></el-input>
      </el-form-item>

      <el-form-item label="积分值" class="flex-50" prop="integralValue">
        <el-input v-model="dataInfo.integralValue" class="cms-width" type="number"></el-input>
      </el-form-item>

      <el-form-item label="有无库存" class="flex-50" prop="haveInventory">
        <el-radio-group v-model="dataInfo.haveInventory">
          <el-radio :label="1">有</el-radio>
          <el-radio :label="0">没有</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="库存数量" class="flex-50" prop="goodsNum" v-if="dataInfo.haveInventory==1">
        <el-input v-model="dataInfo.goodsNum" class="cms-width" type="number"></el-input>
      </el-form-item>

      <el-form-item label="热门兑换" class="flex-50" prop="exchangeHot">
        <el-radio-group v-model="dataInfo.exchangeHot">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="是否展示" class="flex-50" prop="isDisplay">
        <el-radio-group v-model="dataInfo.isDisplay">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="兑换限制" class="flex-50" prop="exchangeNumLimit">
        <el-input v-model="dataInfo.exchangeNumLimit" class="cms-width" type="number"></el-input>
      </el-form-item>

      <el-form-item label="有效期" class="flex-50" prop="expireDateNum">
        <el-input v-model="dataInfo.expireDateNum" class="cms-width" type="number"></el-input> 天
      </el-form-item>

      <el-form-item label="商品图片" class="flex-50" prop="goodsImg">
        <cms-upload :src="dataInfo.goodsImg" @change="getGoodsImg" :is-mark="false" uploadPath="images"></cms-upload>
        <span style="color:red">建议上传图片尺寸 250*250</span>
      </el-form-item>

      <el-form-item label="商品描述" class="flex-100 " prop="content">
        <cms-editor :defaultMsg="dataInfo.goodsDesc" @ready="getUeditor"></cms-editor>
      </el-form-item>

    </el-form>

    <div class="form-footer">
      <el-button type="warning" v-if="isType('save')" @click="add(true)" v-perms="'/integralGoods/save'">提交并继续添加</el-button>
      <el-button type="primary" v-if="isType('save')" @click="add(false)" v-perms="'/integralGoods/save'">添加</el-button>
      <el-button type="primary" v-if="isType('update')" @click="update()" v-perms="'/integralGoods/update'">修改</el-button>
      <el-button type="info" @click="$reset">重置</el-button>
      <span class="gray" v-if="isType('save')">选择“提交并继续添加”按钮会停留在添加页面；选择“提交”按钮后将跳转到对应的列表页</span>
    </div>
  </section>
</template>
<script>
  import axios from "axios/index";
  import va from "@/rules";
  import formMixns from "@/mixins/form";

  export default {
    mixins: [formMixns],
    data() {
      let required = va.required();
      let number = va.number();
      return {
        rules: {
          goodsName: [required],
          goodsSort: [required, number]
        },
        ue: [],
        tagList:[],
        typeList:[],
        dataInfo: {
          integralGoodsId: '',
          goodsTagId: '',
          tagName:'',
          goodsTypeId: '',
          typeName:'',
          goodsName: '',
          goodsImg: '',
          goodsDesc: '',
          goodsLink: '',
          goodsRule: '',
          integralValue: '',
          haveInventory: '',
          exchangeHot: '',
          goodsSort: 99,
          exchangeNumLimit: 0,
          expireDateNum: 1,
          isDisplay:0
        }
      };
    },
    methods: {
      getUeditor(ue, index) {
        this.ue[index] = ue; //获取ue实例
      },
      selectTypeChange(val){
        this.dataInfo.goodsTypeId=val;
      },
      selectTagChange(val){
        this.dataInfo.goodsTagId=val;
      },
      getDataInfo(id, type) {
        if (type == 'update') {
          //重写获取表单数据
          let api = this.$api; //API地址
          axios.all([
            axios.post(api.integralGoodsGet,{integralGoodsId:id})
          ]).then(axios.spread((res) => {
            console.log(res);
            this.dataInfo = res.body; //将用户数据复制给dataInfo
            this.$refs["form"].resetFields();
          })).catch(error => {
            console.log(error);
          });
        }
        this.getTagAndTypeData();
        this.loading = false;
      },
      getGoodsImg(src) {
        this.dataInfo.goodsImg = src;
      },
      add(state) {
        this.dataInfo.goodsDesc=this.ue[0].getContent();
        this.saveDataInfo(state, this.$api.integralGoodsSave, this.dataInfo, "pageList");
      },
      update() {
        this.dataInfo.goodsDesc=this.ue[0].getContent();
        this.updateDataInfo(this.$api.integralGoodsUpdate, this.dataInfo, "pageList");
      },
      getTagAndTypeData(){
        let api = this.$api; //API地址
        axios.all([
          axios.post(api.goodsTagList),
          axios.post(api.goodsTypeList),
        ]).then(axios.spread((tagRes,typeRes) => {
          this.tagList = tagRes.body;
          this.typeList = typeRes.body;
        })).catch(error => {
          console.log(error);
        });
      },
      handleClose(done) {
        done();
      }
    },
    created() {
      //初始获取数据
      this.getDataInfo(this.id, this.type);
    }
  };
</script>

<style>
</style>
